<template>
  <div>
    <div class="topCloumn">
      <div class="content flexBetweenCenter">
        <div class="content-left flexStart">
          <div style="margin-right:15px">
            <img src="@/assets/homeImg/jiaojianju.png" alt />
          </div>
          <div style="margin-right:15px">江苏省交通工程建设局</div>
          <div style="color:#fff">|</div>
          <div style="margin-left:15px">劳务数据中心</div>
        </div>
        <div class="content-right">
          <a-icon type="user" style="color: #fff;" />
          <label style="font-family: 'Microsoft YaHei';margin-left: 5px;">{{this.$store.state.userInfo.fullName}}</label>
          <a-icon type="lock" style="color:#fff;margin-left: 15px;" />
          <label style="font-family: 'Microsoft YaHei';margin-left: 5px;cursor:pointer"  @click="changePassword">密码</label>
          <a-icon type="poweroff" style="color: #fff;margin-left: 15px;" />
          <label style="font-family: 'Microsoft YaHei';margin-left: 5px;cursor:pointer" @click="loginOut()">退出</label>
        </div>
      </div>
    </div>
    <!-- 修改密码弹出框 -->
    <div>
      <a-modal
        v-model="passwordVisable"
        title="修改密码"
        @ok="handleOk"
        :centered="true"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        key="modal1"
      >
        <a-form-model ref="ruleForm" :model="form" :rules="rules" v-if="passwordVisable">
          <a-form-model-item ref="tell" label="手机号" prop="tell">
            <a-input v-model="form.tell" placeholder="请输入手机号" disabled />
          </a-form-model-item>
          <a-form-model-item ref="pwd" label="新密码" prop="pwd">
            <a-input-password v-model="form.pwd" placeholder="请输入新密码"></a-input-password>
          </a-form-model-item>
          <a-form-model-item ref="confirmPwd" label="确认密码" prop="confirmPwd">
            <a-input-password v-model="form.confirmPwd" placeholder="请输入确认密码"></a-input-password>
          </a-form-model-item>
          <a-form-model-item ref="yzm" label="验证码" prop="yzm">
            <a-input
              v-model="form.yzm"
              placeholder="请输入验证码"
              style="width:75%; border-top-right-radius: 0;border-bottom-right-radius: 0;"
            ></a-input>
            <a-button
              type="primary"
              v-if="!isGain"
              @click="outTime"
              style="width:25%;border-top-left-radius: 0;border-bottom-left-radius: 0;border-left:none"
            >获取验证码</a-button>
            <a-button
              type="primary"
              v-if="isGain"
              disabled
              style="width:25%;border-top-left-radius: 0;border-bottom-left-radius: 0;border-left:none"
            >{{countDown}}s后重新发送</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { logout } from '@/api/loginout'
import { modifyPwd, validCode } from '@/api/changePassword'
import { mapGetters } from 'vuex'
export default {
  props: {
    msg: String
  },
  data() {
    let confirmPwd = (rule, value, callback) => {
      if (this.form.confirmPwd == '') {
        callback(new Error('请输入确认密码'))
      } else if (this.form.confirmPwd != this.form.pwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        this.$refs.ruleForm.validateField('confirmPwd')
        callback()
      }
    }
    return {
      form: {
        tell: '',
        pwd: '',
        confirmPwd: '',
        yzm: '',
        key: ''
      },
      passwordVisable: false,
      rules: {
        tell: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'change'
          }
        ],
        confirmPwd: [{ required: true, validator: confirmPwd, trigger: 'change' }],
        yzm: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change'
          }
        ]
      },
      countDown: 60,
      isGain: false,
      timer: ''
    }
  },
  methods: {
    loginOut() {
      logout({}).then((res) => {
        this.$message.success('退出成功')
        top.window.location =
          process.env.VUE_APP_CAS_URL + '/logout?service=' + encodeURIComponent(process.env.VUE_APP_PUBLIC_URL)
      })
    },
    // 修改密码
    changePassword() {
      this.passwordVisable = true
      this.isGain = false
      this.form.pwd = ''
      this.form.confirmPwd = ''
      this.form.yzm = ''
      clearInterval(this.timer)
    },
    // 确认修改
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            confirmPassword: this.form.confirmPwd,
            key: this.form.key,
            newPassword: this.form.pwd,
            userName: this.userInfo.userName,
            verifyCode: this.form.yzm
          }
          modifyPwd(data).then((res) => {
            // console.log(res.data)
            this.$message.destroy()
            this.$message.success('密码修改成功')
            this.passwordVisable = false
            this.loginOut()
          })
        } else {
          return false
        }
      })
    },
    //发送验证码
    sendValidCode() {
      validCode({ cellphone: this.form.tell }).then((res) => {
        this.form.key = res.data.data
        this.$message.destroy()
        this.$message.success('发送成功，请注意查收')
      })
    },
    // 获取验证码
    outTime() {
      this.countDown = 60
      this.isGain = true
      this.sendValidCode()
      this.timer = setInterval(() => {
        this.countDown = this.countDown - 1

        if (this.countDown <= 0) {
          this.isGain = false
          clearInterval(this.timer)
        }
      }, 1000)
    }
  },
  mounted() {
    this.form.tell = this.userInfo.cellphone
  },
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>


<style scoped>
.topCloumn {
  width: 100%;
  height: 72px;
  line-height: 72px;
  /* box-shadow: 0 1px 4px rgb(0 21 41 / 8%); */
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.content-left {
  color: #fff;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.content-right{
  color: #fff;
  font-size: 16px;
}
</style>